<template>
              <div class="content">
                <div class="pics">
                    <img src="../images/blank-cart.png" alt="">
                </div>
                <div class="likes">
                    <div class="words">你可能还喜欢</div>
                    <div class="shows">
                    <div class="item" v-for="it in recommand" :key="it.id">
                        <img :src="`/apis` + it.path" alt="">
                        <div class="title">{{ it.title }}</div>
                        <div class="tags">
                    <span class="tag" v-for="tag in it.tag" :key="tag">
                        <span>{{tag}}</span>
                    </span>
                </div>
                        <div class="price"><span>¥ {{ it.price }}</span><span> <van-icon name="cart-o" /></span></div>
                        <div class="cart-icon"> </div>
                    </div>
                </div>
                </div>
            </div>
</template>
<script lang="ts" setup>
// 获取商品
import{Ref,ref} from 'vue';
import { homeRecommendApi, } from '../apis/homeApi';
const recommand: Ref<Array<any>> = ref([])
const page: Ref<number> = ref(1)
    getList();
async function getList() {
  let _res = await homeRecommendApi(page.value,200 )
  if (_res.code === 200) {
    recommand.value = [...recommand.value, ..._res.data.rows];
  }
}
</script>
<style lang="less" scoped>
@import "../style/common.less";
 .content {
        background-color: #f1f2f4;
        height: 800px;

        > .pics {
            width: 100%;
            height: 270px;
            > img{
                width: 100%;
                height: 100%;
            }
        }

        > .likes{
            border-top:1px solid #e3e4e6 ;
            position: relative;
            padding: 15PX 10px;
            >.words {
                color: black;
                background-color: #e4e5e7;
                border-radius: 18px;
                width: 100px;
                font-size: 13px;
                text-align: center;
                position: absolute;
                top: -10px;
                left: 0;
                right: 0;
            
                margin: auto;
                padding: 0 !important;
            }
            >.shows {
                display: flex;
                background-color: @g03;
               flex-wrap: wrap;
               padding-left: 10px;
           
                @w: 12px;

                >.item {
                    flex: 0 0 calc(50% - @w);
                    position: relative;
                    border-radius: 8px;
                    background-color: @g01;
                    margin-right: @w;
                    box-shadow: 0 0 12px rgba(0, 0, 0, .2);
                    margin-bottom: @w;
                    overflow: hidden;

                    >img {
                        display: block;
                        width: 100%;
                    }

                    >.title {
                        height: 40px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: normal;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        font-size: .7rem;
                        color: @b5;
                        line-height: 20px;
                        padding: 4px 10px;
                        display: -webkit-box;
                    }

                    > .tags {
                        height: 24px;
                        overflow: hidden;
                        padding: 4px 10px;
                        > .tag {
                            display: inline-block;
                            vertical-align: super;
                            border: solid 1px @b8;
                            color: @b8;
                            font-size: .6rem;
                            height: 16px;
                            line-height: 26px;
                            border-radius: 4px;
                            margin-right: 8px;
                            span {
                                display: inline-block;
                                transform: scale(0.7) translateY(-9px);
                            }
                        }
                    }
                    >.price {
                        display: flex;
                        justify-content: space-between;
                        margin: 10px;
                        font-size: .8rem;
                        color: @b8;

                        span {
                            font-size: 1.1rem;
                        }
                    }
                }
            }
        }
    }
</style>